Types avancés TypeScript : Maîtriser les types littéraux de gabarits et conditionnels

Exemple international : Gestion des différents formats de date

Différentes régions du monde utilisent différents formats de date. Vous pouvez utiliser des types conditionnels pour gérer ces variations.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (L'implémentation gérerait les différents formats de date)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Format de date invalide");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Type : { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Type : { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Type : { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Accède à l'année en sachant qu'elle sera là

Cet exemple utilise des types conditionnels pour définir différentes fonctions d'analyse de dates en fonction du format de date spécifié. Le type ParseDate garantit que l'objet retourné a les propriétés correctes en fonction du format.

Combinaison des types littéraux de gabarits et conditionnels

Le véritable pouvoir réside dans la combinaison des types littéraux de gabarits et des types conditionnels. Cela permet des manipulations de types incroyablement puissantes.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName 
  ? { type: T; payload: any }  // Simplifié pour la démonstration
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


// Exemple de fonction qui prend un type
function processEvent(event: T): ExtractEventPayload {
    // Dans une implémentation réelle, nous déclencherions l'événement.
    console.log(`Traitement de l'événement ${event}`);

    // Dans une implémentation réelle, la charge utile serait basée sur le type d'événement.
    return { type: event, payload: {} } as ExtractEventPayload;
}

// Notez que les types de retour sont très spécifiques :
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

// Si vous utilisez d'autres chaînes, vous obtenez `never` :
// const someOtherEvent = processEvent("someOtherEvent"); // Le type est `never`

Bonnes pratiques et considérations

• Garder la simplicité : Bien que puissants, ces types avancés peuvent rapidement devenir complexes. Visez la clarté et la maintenabilité.
• Tester rigoureusement : Assurez-vous que vos définitions de types se comportent comme prévu en écrivant des tests unitaires complets.
• Documenter votre code : Documentez clairement le but et le comportement de vos types avancés pour améliorer la lisibilité du code.
• Considérer les performances : L'utilisation excessive de types avancés peut affecter le temps de compilation. Profilez votre code et optimisez si nécessaire.